<template>
  <div :class="['flex', { 'flex-col': align === 'vertical' }]">
    <router-link to="/" class="item lt-sm:self-start">产品</router-link>
    <a href="https://www.imooc.com" target="_blank" class="item lt-sm:self-start">社区</a>
    <router-link to="/study" class="item lt-sm:self-start">学习</router-link>
    <router-link to="/about" class="item lt-sm:self-start">关于</router-link>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'

defineProps({
  align: {
    type: String as PropType<'vertical' | 'horizanal'>
  }
})
</script>

<style scoped lang="scss">
// 使用 transformer 定义样式
.item {
  --at-apply: relative text-white text-xl px-8 py-2 font-300 cursor-pointer;
  &:hover {
    --at-apply: font-500;
    &:after {
      content: '';
      --at-apply: absolute bg-gray-100 w-8 h-[1px] bottom-0 left-[calc(50%-1rem)];
      // left: calc(50% - 1rem);
    }
  }
}
</style>
